@charset "utf-8";

@import '../../theme.scss';

.x-alert {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 99996;
  background: var(--x-mask-color);
  opacity: 0;
  transition: opacity 0.2s ease-out;

  &__inner {
    width: px(580);
    background: var(--x-panel-bg-color);
    box-shadow: 0 0 px(16) rgba(0, 39, 61, 0.05);
    border-radius: px($bigRadius);
    opacity: 0;
    transform-origin: 50%;
  }

  &__body {
    padding: px(50) px(40) px(20) px(40);

    > h1 {
      display: block;
      margin-bottom: px(15);
      font-size: px(32);
      line-height: 1.5;
      margin-top: px(-10);
      color: var(--x-text-color);
      text-align: center;
    }

    > .desc {
      font-size: px(26);
      line-height: 1.5;
      color: var(--x-text-color-o60);
      display: flex;
      justify-content: center;

      &.no-title {
        color: var(--x-text-color);
        font-size: px(32);
      }
    }
  }

  &__btns {
    display: flex;
    padding: px(20) px(40) px(50) px(40);
    justify-content: flex-end;

    .x-button {
      font-size: px(28);
      height: px(80);

      &:not(:last-child) {
        margin-right: px(20);
      }
    }

    &.x-alert__btns--column {
      flex-direction: column;

      .x-button {
        margin-right: 0;

        &:not(:last-child) {
          margin-bottom: px(20);
        }
      }
    }
  }

  &--show {
    opacity: 1;

    .x-alert__inner {
      transform: scale(1, 1);
      opacity: 1;
      animation: __x_alert_show 0.2s ease-out;
    }

    @at-root {
      @keyframes __x_alert_show {
        0% {
          transform: scale(1.4, 1.4);
          opacity: 0;
        }

        75% {
          transform: scale(0.95, 0.95);
          opacity: 1;
        }

        100% {
          transform: scale(1, 1);
          opacity: 1;
        }
      }
    }
  }

  &--hide {
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;

    .x-alert__inner {
      transform: scale(0.95, 0.95);
      transition: all 0.15s ease-out;
    }
  }
}
